<template>
    <div class="addBrand-container" id="member-add-app">
        <div class="container">
            <el-form :inline="false" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="180px"
                ref="ruleForm">
                <el-form-item label="账号:" prop="username">
                    <el-input maxlength="20" placeholder="请输入账号" v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="员工姓名:" prop="name">
                    <el-input maxlength="20" placeholder="请输入员工姓名" v-model="ruleForm.name" />
                </el-form-item>

                <el-form-item label="手机号:" prop="phone">
                    <el-input maxlength="20" placeholder="请输入手机号" v-model="ruleForm.phone" />
                </el-form-item>
                <!-- <el-form-item label="密码:" prop="password">
                <el-input maxlength="20" placeholder="请输入密码" v-model="ruleForm.password" />
            </el-form-item> -->
                <el-form-item label="性别:" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号:" prop="idNumber">
                    <el-input maxlength="20" placeholder="请输入身份证号" v-model="ruleForm.idNumber" />
                </el-form-item>
                <div class="subBox address">
                    <el-form-item>
                        <el-button @click="goBack()">
                            取消
                        </el-button>
                        <el-button @click="submitForm('ruleForm', false)" type="primary">
                            保存
                        </el-button>
                        <el-button @click="submitForm('ruleForm', true)" class="continue" type="primary"
                            v-if="actionType == 'add'">
                            保存并继续添加
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
//引入接口
import { queryEmployeeById, addEmployee, editEmployee } from '@/api/member'

export default {
    name: 'MemberAdd',
    data() {
        return {
            id: '',
            actionType: '',
            ruleForm: {
                'name': '',
                'phone': '',
                'sex': '男',
                'idNumber': '',
                username: ''
            }
        }
    },
    computed: {
        rules() {
            return {
                //账号
                username: [
                    {
                        required: true, 'validator': this.$validate.checkUserName, trigger: 'blur'
                    }
                ],
                //姓名
                name: [{ required: true, 'validator': this.$validate.checkName, 'trigger': 'blur' }],
                'phone': [{ 'required': true, 'validator': this.$validate.checkPhone, 'trigger': 'blur' }],
                'idNumber': [{ 'required': true, 'validator': this.$validate.validID, 'trigger': 'blur' }]
            }
        }
    },
    created() {
        this.id = this.$validate.requestUrlParam('id')
        this.actionType = this.id ? 'edit' : 'add'
        if (this.id) {
            this.init()
        }
    },
    mounted() {
    },
    methods: {
        async init() {
            console.log("=====id");
            console.log(this.id);
            queryEmployeeById(this.id).then(res => {
                console.log(res)
                if (String(res.code) === '1') {
                    console.log(res.data)
                    this.ruleForm = res.data
                    this.ruleForm.sex = res.data.sex === '0' ? '女' : '男'
                    // this.ruleForm.password = ''
                } else {
                    this.$message.error(res.msg || '操作失败')
                }
            })
        },
        submitForm(formName, st) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.actionType === 'add') {
                        const params = {
                            ...this.ruleForm,
                            sex: this.ruleForm.sex === '女' ? '0' : '1'
                        }
                        addEmployee(params).then(res => {
                            if (res.code === 1) {
                                this.$message.success('员工添加成功！')
                                if (!st) {
                                    this.goBack()
                                } else {
                                    this.ruleForm = {
                                        username: '',
                                        'name': '',
                                        'phone': '',
                                        // 'password': '',
                                        // 'rePassword': '',/
                                        'sex': '男',
                                        'idNumber': ''
                                    }
                                }
                            } else {
                                this.$message.error(res.msg || '操作失败')
                            }
                        }).catch(err => {
                            this.$message.error('请求出错了：' + err)
                        })
                    } else {
                        const params = {
                            ...this.ruleForm,
                            sex: this.ruleForm.sex === '女' ? '0' : '1'
                        }
                        editEmployee(params).then(res => {
                            if (res.code === 1) {
                                this.$message.success('员工信息修改成功！')
                                this.goBack()
                            } else {
                                this.$message.error(res.msg || '操作失败')
                            }
                        }).catch(err => {
                            this.$message.error('请求出错了：' + err)
                        })
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        goBack() {
            const menu = {
                id: '2',
                url: 'home/member',
                name: '员工管理',
                goBackFlag: false
            }
            this.$store.dispatch('menuHandle', menu)
        }

    }


};
</script>

<style lang="scss" scoped>
</style>